import React from 'react';
/**
 * btns:
 * [
 *  {name:String, evt:String}
 * ]
 */

const getBtnCls=function(evt){
    let cls;
    switch(evt){
        case 'cancel':
        cls='btn btn-warning';
        break;
        case 'test':
        cls='btn btn-info';
        break;
        case 'del':
        cls='btn btn-danger';
        break;
        case 'link':
        cls='btn btn-link';
        break;
        default:
        cls='btn btn-primary';
        break;
    }
    return cls;
}

const m_title='提示';
const m_content='暂无内容';
class Modaler extends React.Component{
    constructor(props){
        super();
        this.control=null;
        this.state = {
            title:props.title||m_title,
            content:props.content||m_content,
            btns:[
                {name:'确认', evt:'ok'},
                {name:'取消', evt:'cancel'}
            ]
        };
        if(props.control!=undefined){
            this.initControl(props.control);
        }
        this.handleClick = this.handleClick.bind(this);
    }
    initControl(hooks){
        let that=this;
        this.control=hooks;
        this.control.addHook('show',function(data){
            let params=data.params;
            if(params!=undefined){
                that.setState({
                    title:params.title||m_title,
                    content:params.content||m_content,
                    btns:params.btns||[]
                });
            }
            $('#g_modalbox').modal('show');
        });
        this.control.addHook('hide',function(){
            $('#g_modalbox').modal('hide');
        });
    }
    render(){
        let that=this;
        return (
            <div id="g_modalbox" className="modal fade" style={{display:"none"}} >
                <div className="modal-dialog">
                    <div className="modal-content">
                    <div className="modal-header">
                        <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title">{this.state.title}</h4>
                    </div>
                    <div className="modal-body">
                        {this.state.content}
                    </div>
                    <div className="modal-footer">
                        {
                            this.state.btns.map(e=>{
                                let cls=getBtnCls(e.evt);
                                return <button type="button" className={cls} key={e.evt} data-evt={e.evt} onClick={that.handleClick} >{e.name}</button>
                            })
                        }
                    </div>
                    </div>
                </div>
            </div>
        );
    }
    handleClick(e){
        let that=this;
        let evt=e.target.getAttribute('data-evt');
        that.control.dispatch('callback',{
            evt:evt
        });
        that.control.dispatch('hide');
    }
}

export default Modaler;